
<div class="w-80">
  <div class="relative select-none rounded-full bg-stone-200 h-1">
    <div class="h-full rounded-full bg-transparent" style="position:absolute;left:0%;width:20%"></div>
    <div class="h-full rounded-full bg-stone-800" style="position:absolute;left:20%;width:60%"></div>
    <div class="h-full rounded-full bg-transparent" style="position:absolute;left:80%;width:20%"></div>
    <button role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="rounded-full shadow shadow-stone-800/10 outline-none ring ring-transparent w-3.5 h-3.5 bg-stone-800 border-stone-800 focus:ring-stone-800/10 active:ring-stone-800/10" style="position:absolute;top:50%;left:20%;z-index:0;transform:translate(-50%, -50%)"></button>
    <button role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" class="rounded-full shadow shadow-stone-800/10 outline-none ring ring-transparent w-3.5 h-3.5 bg-stone-800 border-stone-800 focus:ring-stone-800/10 active:ring-stone-800/10" style="position:absolute;top:50%;left:80%;z-index:0;transform:translate(-50%, -50%)"></button>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:0%">0</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:10%">10</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:20%">20</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:30%">30</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:40%">40</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:50%">50</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:60%">60</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:70%">70</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:80%">80</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:90%">90</span>
    <span class="absolute h-full -translate-x-1/2 text-stone-600 before:absolute before:left-1/2 before:rounded-full before:content-[''] text-sm before:h-2 before:w-px top-3 before:-top-3 before:bg-primary" style="left:100%">100</span>
  </div>
</div>
